import React from "react";
import { Form, Input, Button,  Radio } from "antd";

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16},
}
const formItemLayoutButton = {
  labelCol: { span: 0 },
  wrapperCol: { span: 24},
}
     

@Form.create()
class StepOne extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
  
    }
    
  }

  handleNextStep = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, nextStep } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }

      nextStep(values)
    });
  }

  render() {
    const {
      entrustDetailData,
      form,
    } = this.props;
    const { getFieldDecorator } = form; // getFieldValue
    return (
      <div style={{width:'500px'}}>
        <Form>
          <Form.Item label="委托名称" {...formItemLayout}>
            {getFieldDecorator("entrustName", {
                initialValue: entrustDetailData.entrustName,
                rules: [
                  { required: true, message: "请输入委托名称" },
                  { max: 64, message: "流程名称长度不能超过64" },
                  {
                    pattern: /^[a-zA-Z_0-9\u4e00-\u9fa5]*$/,
                    message: "支持字母、数字、下划线、中文",
                  },
                ],
              })(<Input placeholder="请输入流程名称" />)}
          </Form.Item>
          <Form.Item label="委托编码" {...formItemLayout}>
            {getFieldDecorator("code", {
                initialValue: entrustDetailData.code,
                rules: [
                  { required: true, message: "请输入委托编码" },
                  { max: 32, message: "编码长度不能超过32" },
                  {
                    pattern: /^[a-zA-Z_0-9]*$/,
                    message: "支持字母、数字、下划线",
                  },
                ],
              })(<Input placeholder="请输入流程编码" />)}
          </Form.Item>
          <Form.Item label="事宜描述" {...formItemLayout}>
            {getFieldDecorator("description", {
                initialValue: entrustDetailData.description,
                rules: [
                  { required: true, message: "请输入事宜描述" },
                  { max: 150, message: "编码长度不能超过150" },
                ],
              })(<Input placeholder="请输入流程编码" />)}
          </Form.Item>
          <Form.Item label="是否立即生效" {...formItemLayout}>
            {getFieldDecorator("status", {
                initialValue: entrustDetailData.status,
                rules: [
                  { required: true, message: "请选择" },
                ],
              })(
                <Radio.Group>
                  <Radio value={0}>否</Radio>
                  <Radio value={1}>是</Radio>
                </Radio.Group>
              )}
          </Form.Item>
          <Form.Item {...formItemLayoutButton}>
            <div style={{display:'flex', justifyContent:'center'}}>
              <Button style={{ marginLeft: '5px'}} className='list__btn' type="primary" onClick={this.handleNextStep}>
                <span>下一步</span>
              </Button>
            </div>
          </Form.Item>
        </Form>
      </div>
    )
  }
}

export default StepOne;